<script setup lang='ts'>import { ref } from 'vue';

const visible = ref(false);
const list=ref([
  {
    id:0,selected:true
  },
  {
    id:1,selected:false
  },
  {
    id:2,selected:true
  },
  {
    id:3,selected:false
  },
])
const selectedAll = () => {
   const res= list.value.every(item=>item.selected)
   list.value.forEach(item=>item.selected=!res)  
};
const changeAll=()=>{
  const res= list.value.every(item=>item.selected)
  if(res){
    visible.value=true
  }else{
    visible.value=false
  }
}

</script>

<template>
  <div>
    全选:<CheckBox v-model="visible" @click="selectedAll" />
  </div>
  <div class="radio">
    单选
    <template v-for="item in list" :key="item.id">
      <CheckBox v-model="item.selected" @click="changeAll" />
    </template>
  </div>
</template>

<style lang="less" scoped></style>